<template>
  <el-dialog
    v-model="dialogVisible"
    title="文件详情"
    width="25%"
    :close-on-click-modal="false"
    :show-close="true"
    @close="handleClose"
  >
    <div class="flex flex-col items-center">
        <div class="text-orange-500 font-[1rem] text-center my-[1.25rem]">本文档受独立站分享保护， 仅限于本站成员下载查阅，所有下载均记录在案，请勿扩散</div>
      <div class="w-[4rem] h-[4rem] mb-[1rem]">
        <img :src="fileIcon" alt="file icon" class="w-full h-full" />
      </div>
      <div class="text-[1.125rem] text-[#000000] font-medium my-[0.5rem]">{{ fileName }}</div>
      <div class="text-[0.875rem] text-[#6B7280] ">
        上传：{{ uploader }} {{ fileSize }} {{ uploadTime }}
      </div>
      
      <a :href="fileUrl" download class="text-[0.875rem] font-[Inter] font-normal leading-[1.25rem] text-[#2563EB] cursor-pointer my-[1rem]">
        下载
      </a>

      <div class="text-[0.75rem] text-[#6B7280] py-[1rem] border-[1px] border-t-solid border-t-[#0000000d] w-full text-center">
        「{{ groupName }}」成员下载记录 (下载次数：{{ downloadCount }})
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { ElDialog, ElButton } from 'element-plus';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  fileUrl: {
    type: String,
    default: ''
  },
  fileName: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['update:modelValue', 'close', 'download']);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
});

// 模拟数据
const uploader = ref('RuHu.Xu');
const fileSize = ref('9.63 MB');
const uploadTime = ref('2025-06-09 21:07');
const groupName = ref('小许的星球');
const downloadCount = ref(0);

// 根据文件名获取图标
const fileIcon = computed(() => {
  const extension = props.fileName.split('.').pop()?.toLowerCase() || '';
  
  switch (extension) {
    case 'pdf':
      return '/public/icon/pdf.png';
    case 'doc':
    case 'docx':
      return '/public/icon/word.png';
    case 'xls':
    case 'xlsx':
      return '/public/icon/excel.png';
    case 'ppt':
    case 'pptx':
      return '/public/icon/ppt.png';
    case 'jpg':
    case 'jpeg':
    case 'png':
    case 'gif':
    case 'webp':
      return '/public/icon/image.png';
    case 'mp4':
    case 'avi':
    case 'mov':
    case 'wmv':
      return '/public/icon/video.png';
    case 'mp3':
    case 'wav':
    case 'ogg':
      return '/public/icon/audio.png';
    case 'zip':
    case 'rar':
    case '7z':
    case 'tar':
    case 'gz':
      return '/public/icon/zip.png';
    case 'txt':
      return '/public/icon/text.png';
    case 'html':
    case 'css':
    case 'js':
    case 'ts':
    case 'jsx':
    case 'tsx':
    case 'vue':
      return '/public/icon/code.png';
    default:
      return '/public/icon/file.png';
  }
});

const handleClose = () => {
  emit('close');
};

const handleDownload = () => {
  if (props.fileUrl) {
    // 触发下载事件
    emit('download', props.fileUrl);
    
    // 使用fetch获取文件并转换为blob
    fetch(props.fileUrl)
      .then(response => response.blob())
      .then(blob => {
        // 创建blob URL
        const blobUrl = URL.createObjectURL(blob);
        
        // 创建一个隐藏的a标签来下载文件
        const link = document.createElement('a');
        link.href = blobUrl;
        link.download = props.fileName || props.fileUrl.split('/').pop() || 'download';
        document.body.appendChild(link);
        link.click();
        
        // 清理
        setTimeout(() => {
          document.body.removeChild(link);
          URL.revokeObjectURL(blobUrl);
        }, 100);
      })
      .catch(error => {
        console.error('下载文件失败:', error);
        // 如果fetch失败，回退到window.open方法
        window.open(props.fileUrl, '_blank');
      });
  }
};
</script>

<style scoped>
/* 可以添加自定义样式 */
</style> 